<template>
  <el-container>
    <div  :style="{backgroundImage: 'url('+ getRandomBackground()+')'}"></div>
    <cms-nav-bar></cms-nav-bar>
    <keep-alive>
      <cms-main></cms-main>
    </keep-alive>
    <el-footer height="40px">
      <cms-footer></cms-footer>
    </el-footer>
  </el-container>
</template>

<script setup>
import { ref } from 'vue';
import cmsMain from './main.vue';
import cmsNavBar from './NavBar.vue';
import cmsFooter from './Footer.vue';
// 引入背景图
import backgroundImages from './backgroundImages.js'

const backgroundImagesArray = ref(backgroundImages);
function getRandomNumber(min ,max) {
  return Math.floor(Math.random() * (max -min +1))+min;
}



function getRandomBackground() {
  const randomIndex = getRandomNumber(0, backgroundImagesArray.value.length - 1);
  return backgroundImagesArray.value[randomIndex];
}

</script>

<style scoped>
.el-footer {
  background-color: rgba(84, 92, 100, 0.5);
}

.background {
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0px;
  padding: 0px;
  top: 0;
  width: 100%;
  height: 120vh;
  position: fixed;
  z-index:-1;
}

@media screen and (max-width: 768px) {
  .title {
    width: 100%;
    background-position-x: center;
    background-position-y: 0;
  }
}
</style>
